<template>
  <div class="container">
    <div>基本属性</div>
    <div class="line"></div>
    <div class="flex_row">
      <div class="row">
        <div class="font"><span style="color: red">*</span>考点标题：</div>
        <div>
          <el-input
            v-model="title"
            placeholder="请输入考点标题"
            clearable
            size="small"
          />
        </div>
      </div>
      <div class="row">
        <div class="font"><span style="color: red">*</span>学习人数：</div>
        <div>
          <el-input
            v-model="learnNumber"
            placeholder="请输入学习人数"
            clearable
            size="small"
          />
        </div>
      </div>
      <div class="row">
        <div class="font"><span style="color: red">*</span>课程列表：</div>
        <div>
          <el-select v-model="level" placeholder="请选择" class="search_info2">
            <el-option
              v-for="item in levelList"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="flex_row">
      <div class="row">
        <div class="font"><span style="color: red">*</span>封面图片：</div>
        <div>
          <div>
            <el-upload
              :headers="token"
              class="avatar-uploader"
              action="https://www.xlpx.org.cn/manage/prod-api/video/imgUpload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="font">实操详情：</div>
      <div>
        <el-upload
          :headers="token"
          class="upload-demo"
          :limit="1"
          :on-exceed="handleExceed"
          :on-remove="handleRemove"
          action="https://www.xlpx.org.cn/manage/prod-api/video/imgUpload"
          :on-success="handleAvatarSuccess2"
          :before-upload="beforeAvatarUpload2"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传pdf文件，且不超过20MB
          </div>
        </el-upload>
      </div>
    </div>
    <div class="footer">
      <el-button @click="back()">返回</el-button>
      <el-button type="primary" @click="submit()">提交</el-button>
    </div>
  </div>
</template>

<script>
import { operationAdd } from "@/api/system/user";
import { getToken } from "@/utils/auth";
export default {
  components: {},
  data() {
    return {
      fileList: [],
      imageUrl: "",
      imageUrlDetail: "",
      imageName: "",
      imageNameDetail: "",
      token: {
        Authorization: getToken(),
      },
      title: "",
      level: null,
      learnNumber: null,
      sex: "",
      sexList: [
        { key: "0", value: "男" },
        { key: "1", value: "女" },
        { key: "2", value: "未知" },
      ],
      phonenumber: "",
      nation: "",
      identificationCard: "",
      education: "",
      educationList: [
        { key: "1", value: "博士及以上" },
        { key: "2", value: "硕士" },
        { key: "3", value: "本科" },
        { key: "4", value: "专科" },
        { key: "5", value: "高中" },
        { key: "6", value: "其他" },
      ],
      work: "",
      workYear: "",
      testLevel: "",
      testDirection: "",
      reference: "",
      receivable: "",
      receipts: "",
      levelList: [
        { key: "1", value: "消防设施操作员基础知识" },
        { key: "2", value: "消防设施操作员初级" },
        { key: "3", value: "消防设施操作员中级（监控方向）" },
        { key: "4", value: "消防设施操作员中级（维保方向）" },
        { key: "5", value: "消防设施操作员高级（监控方向）" },
        { key: "6", value: "消防设施操作员高级（维保方向）" },
      ],
      directList: [
        { key: "1", value: "监控方向" },
        { key: "2", value: "维保方向" },
      ],
    };
  },
  created() {},
  mounted() {},
  methods: {
    back() {
      this.$router.push("operationList");
    },
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3);
    },
    handleAvatarSuccess(res, file) {
      this.imageName = res.imageName;
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    handleAvatarSuccess2(res, file) {
      console.log(res);
      this.imageNameDetail = res.imageName;
      // this.imageName = res.imageName;
      // this.imageUrl = URL.createObjectURL(file.raw);
    },
    handleAvatarSuccessDetail(res, file) {
      this.imageNameDetail = res.imageName;
      // this.imageUrlDetail = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 20;
      if (!isJPG && !isPNG) {
        this.$message.error("上传头像图片只能是 JPG或PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 20MB!");
      }
      return (isJPG || isPNG) && isLt2M;
    },
    handleRemove() {
      this.info.detailImageUrl = null;
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeAvatarUpload2(file) {
      console.log(file);
      const isPDF = file.type === "application/pdf";
      // const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 20;
      if (!isPDF) {
        this.$message.error("上传文件只能是 PDF 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传文件大小不能超过 20MB!");
      }
      return isPDF && isLt2M;
    },
    submit() {
      let params = {
        title: this.title,
        level: this.level,
        titleImageUrl: this.imageName,
        learnNumber: this.learnNumber,
        detailImageUrl: this.imageNameDetail,
      };
      operationAdd(params).then((res) => {
        if (res.code == 200) {
          this.$message({ message: res.msg, type: "success" });
          this.$router.push("operationList");
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
  },
};
</script>
<style scoped>
.container {
  padding-left: 26px;
  padding-right: 24px;
  padding-top: 24px;
}
.row {
  display: flex;
  padding-bottom: 20px;
}
.line {
  height: 1px;
  background: #dcdfe6;
  width: 100%;
  margin-top: 6px;
  margin-bottom: 20px;
}
.row .font {
  width: 200px;
  text-align: right;
  margin-right: 20px;
}
.row .fonts {
  width: 300px;
  text-align: right;
  margin-right: 20px;
}
.flex_row {
  display: flex;
}
.footer {
  width: 540px;
  text-align: right;
  margin-top: 40px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  /* text-align: center; */
  border: 1px dashed #000;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
